<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul {
				/*设置导航栏的框框*/
				margin: 30px auto;
				/*框框整体的位置，30px是指离网页的顶部和下部的距离，auto控制的是左右距离为自动调节*/
				width: 600px;
				/*框框的宽度*/
				height: 350px;
				/*框框的长度*/
				padding: 0px;
			}
			li {
				list-style-type: none;
				/* 去掉li前的点 */
				float: left;
				/*将li设置成做浮动，变为联动*/
				display: block;
				/*将a变成块状*/
				width: 100px;
				/*设置块的宽度*/
				height: 50px;
				/*设置块的长度*/
				font-family: Microsoft Yahei;
				line-height: 50px;
				/*设置字体在块中的高度*/
				background-color: green;
				margin: 0px 0px;
				/*块里的高宽通过margin设置*/
				color: #fff;
				text-align: center;
				/*字体居中*/
				text-decoration: none;
				/*去掉下划线*/
				font-size: 15px;
			}

			li:hover {
				background-color: #E35885;
			}
		</style> 
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(item) in lesson" v-on:click="fn(item.name)">
					{{item.name}}
				</li>
			</ul>
			<span>选择了<div>{{mm}}</div></span>
		</div>
		<script src="../vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					lesson: [
						{ name: 'HTML'},
						{ name: 'CSS'},
						{ name: 'JavaScript'}, 
						{ name: 'Vue.js'}
					],
					mm: ""
				},
				methods: {
					fn(item){
						this.mm = item
					}
				}
			});
		</script>
	</body>
</html>
